<template>
	<div class="book">
		<div class="header">
			<el-input class="input" v-model="input" placeholder="请输入内容"></el-input>
			<el-button style="height: 40px;" type="danger" icon="el-icon-search"></el-button>
			<router-link to="/pc/mycart" class="myCart">
				<i class="el-icon-shopping-cart-2"></i>
				我的购物车</router-link>
		</div>
		<div class="back">
			<div style="height: 4vh;">
				<el-button type="info" plain style="width: 100px; height: 40px;" @click="back()">返回</el-button>
				<p style="float: right; height: 45px; line-height: 45px; font-size: 15px; color: #f13f20;">同类商品推荐</p>
				<hr style="border: 0; background-color: #f13f20; height: 1px;">
			</div>
			<div class="synopsis">
				<div class="src">
					<img :src="`http://127.0.0.1/api/public/showimg/${book.pic}`" />
				</div>
				<div>
					<h3>{{book.name}}</h3>
					<table>
						<tbody>
							<tr>
								<td>
									<p>类别：</p>
								</td>
								<td>
									<b>{{book.type.name}}</b>
								</td>
							</tr>
							<tr>
								<td>
									<p>出版社：</p>
								</td>
								<td>
									<b>{{book.maker}}</b>
								</td>
							</tr>
							<tr>
								<td>
									<p>作者：</p>
								</td>
								<td>
									<b>{{book.author}}</b>
								</td>
							</tr>
							<tr>
								<td>
									<p>出版时间：</p>
								</td>
								<td>
									<b>{{book.tmake}}</b>
								</td>
							</tr>
							<tr>
								<td>
									<p>出版号：</p>
								</td>
								<td>
									<b>{{book.sn}}</b>
								</td>
							</tr>
							<tr>
								<td>
									<p>价格：</p>
								</td>
								<td>
									<b>{{book.price}}</b>
								</td>
							</tr>
							<tr>
								<td>
									<p>库存：</p>
								</td>
								<td>
									<b>{{book.stock}}</b>
								</td>
							</tr>
							<tr>
								<td>
									<p>销量：</p>
								</td>
								<td>
									<b>{{book.salenum}}</b>
								</td>
							</tr>
						</tbody>
					</table>
					<button class="addcart" @click="addCart()">
						<i class="el-icon-shopping-cart-2"></i>
						加入购物车</button>
				</div>
				<div>
					<ul style="width: 100%; height: 100%;">
						<li style="width: 100%;height: 20%; display: flex;" v-for="(item, index) in booklist"
							:key="item.id">
							<router-link :to="`/pc/bookdetail/${item.id}`">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
							</router-link>
							<div style="margin-left: 10px;">
								<h5>{{item.name}}</h5>
								<p style="margin-top: 10px; font-size: 15px;">{{item.maker}}
									<span style="margin-left: 20px;">{{item.author}}</span>
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="detail">
				<th>商品详情</th>
				<hr style="border: none; height: 1px; background-color: #f13f20;">
				<p v-html="book.info"></p>
			</div>
			<div class="evaluate">
				<div class="user">
					<th style="color: #a357ff;">商品评价</th>
					<img v-if="this.$store.state.token == null" src="../../assets/img/mobile/origin.webp" />
					<img v-if="this.$store.state.token != null"
						:src="`http://127.0.0.1/api/public/showimg/${this.$store.state.pic}`" />
				</div>
				<div style="margin-left: 30px;">
					<textarea v-model="content" style="width: 800px; height: 60px;" placeholder="万水千山总是情,评论两句行不行"></textarea>
					<div style="display: flex;">
						<el-rate v-model="rate" show-text>
						</el-rate>
						<button class="button" @click="comment()">发布</button>
					</div>
				</div>
			</div>
			<hr style="border: none; background-color: aquamarine; height: 1px;">
			<ul style="width: 100%; height: 25%;">
				<li v-for="(item, i) in contents" style="display: flex; height: 25%; font-size: 12px;">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.img}`" />
					<div>
						<div style="display: flex; height: 2rem;">
							<th>{{item.nickname}}</th>
							<span style="padding-left: 2rem;">
								{{item.tpost}}
							</span>
							<el-rate v-model="item.rate" disabled :colors="colors" style="padding-left: 2rem;">
							</el-rate>
						</div>
						<div>
							{{item.content}}
						</div>
					</div>
				</li>
			</ul>
			<div style="text-align: center;">
				<el-pagination v-if="total > 0" class="pagination" background @current-change="handleCurrentChange"
					:current-page="1" :current-page.sync="curPage" :page-size="4" layout="prev, pager, next"
					:total="total">
				</el-pagination>
			</div>
		</div>


	</div>
</template>

<script>
	import Vue from 'vue';
	export default {
		data() {
			return {
				input: '',
				book: {
					author: '',
					id: '',
					info: '',
					name: '',
					maker: '',
					name: '',
					pic: '',
					price: '',
					salenum: '',
					sn: '',
					stock: '',
					tmake: ''
				},
				contents: [],
				content: '',
				rate: 0,
				total: 0,
				curPage: 0,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				booklist: []
			}
		},
		async mounted() {
			await this.$axios.get("/api/public/book/findById/" + this.$route.params.bookid).then(res => {
				this.book = res.data.data
				console.log(this.book)
				this.book.tmake = this.book.tmake.slice(0, 10)
				this.book.info = this.book.info.replaceAll('！', '！<br/>')
				this.book.info = this.book.info.replaceAll('；', '；<br/>')
			})
			await this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/0").then(res => {
				this.total = res.data.data.total
			})
			await this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/4")
				.then(res => {
					this.contents = res.data.data.comments
					this.contents.forEach((item, i) => {
						item.tpost = item.tpost.slice(0, 10)
					})
				})
			await this.$axios.get("/api/public/findPageBook/1/4/" + this.book.type.id).then(res => {
				this.booklist = res.data.data.books
				console.log(this.booklist)
			})
			// this.list = this.booklist;
			// this.list.splice(10, 2)
			// this.booklist.sort(function(a, b) {
			// 	return b.salenum - a.salenum
			// })
		},
		watch: {
			'$route.params.bookid'() {
				this.$axios.get("/api/public/book/findById/" + this.$route.params.bookid).then(res => {
					this.book = res.data.data
					console.log(this.book)
					this.book.tmake = this.book.tmake.slice(0, 10)
					this.book.info = this.book.info.replaceAll('！', '！<br/>')
					this.book.info = this.book.info.replaceAll('；', '；<br/>')
				})
				this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/0").then(res => {
					this.total = res.data.data.total
				})
				this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/4")
					.then(res => {
						this.contents = res.data.data.comments
						this.contents.forEach((item, i) => {
							item.tpost = item.tpost.slice(0, 10)
						})
					})
			}
		},
		methods: {
			comment() {
				if (this.$store.state.token != null) {
					let fd = new FormData();
					fd.append("content", this.content)
					console.log(this.content)
					fd.append("rate", this.rate)
					this.$axios.post("/api/public/rate/add/" + this.book.id, fd, this.$store.state.token).then(res => {
						this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/0")
							.then(res => {
								this.total = res.data.data.total
								this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid +
									"/1/4").then(res => {
									this.contents = res.data.data.comments
									this.contents.forEach((item, i) => {
										item.tpost = item.tpost.slice(0, 10)
									})
								})
							})
					})
					this.content = '';
					this.rate = 0;
				} else {
					Vue.prototype.$message.error('请登录后评论');
				}
			},
			addCart() {
				if (this.$store.state.token != null) {
					this.$axios.get("/api/public/addCart/" + this.$route.params.bookid, this.$store.state.token).then(
						res => {
							this.total = res.data.data.total
						})
				} else {
					Vue.prototype.$message.error('请登录后购买');
				}
			},
			handleCurrentChange(val) {
				this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/" + val + "/4")
					.then(res => {
						this.contents = res.data.data.comments
						this.contents.forEach((item, i) => {
							item.tpost = item.tpost.slice(0, 10)
						})
					})
			},
			back() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped>
	.book {}

	.book .header {
		display: flex;
		justify-items: center;
		text-align: center;
		padding: 20px 0;
		width: 100%;
		height: 50px;
	}

	.book .header .input {
		margin-left: 25%;
		width: 30%;
	}

	.book .header .myCart {
		display: flex;
		align-items: center;
		justify-items: center;
		margin-left: 15%;
		height: 40px;
		padding: 5px;
		background-color: #f76666;
		color: white;
		border-radius: 8px;
	}

	.book .header .myCart:hover {
		padding: 8px;
		background-color: #f76666;
	}

	.book .back {
		width: 80%;
		height: 120vh;
		margin: auto;
	}

	.book .synopsis {
		width: 100%;
		height: 45%;
		display: flex;
	}

	.book .synopsis .src {
		height: 100%;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.book .synopsis .src img {
		height: 80%;
		width: 80%;
	}

	.book .synopsis div {
		margin: 30px;
		height: 100%;
	}

	.book .synopsis div table {
		height: 80%;
	}

	.book .synopsis .addcart {
		width: 100px;
		height: 30px;
		padding: 5px;
		background-color: #f76666;
		color: white;
		border-radius: 3px;
		border: none;
	}

	.book .synopsis .addcart:hover {
		cursor: pointer;
	}

	.book .detail {
		width: 100%;
		height: 10%;
		font-size: 14px;
	}

	.book .evaluate {
		display: flex;
		width: 100%;
		height: 10%;
	}

	.book .evaluate .user img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.book .evaluate .button {
		margin-left: 70px;
		width: 60px;
		height: 30px;
		background-color: #3998fd;
		color: white;
		border: none;
		border-radius: 3px;
	}

	.book .evaluate .button:hover {
		cursor: pointer;
	}

	.book .back ul li img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 20px;
	}
</style>